<div class="bjui-pageHeader">
    <form id="pagerForm" data-toggle="ajaxsearch" action="${request.getContextPath()}/DataStatistics/dataStatistics" method="post">
        <div class="bjui-searchBar">
            <g:hiddenField name="SYS_QUERY_NAME" value="dataStatistics" />
            <g:hiddenField name="EXPORT_CONTENT_NAME" value="Excel" />
            %{--<label >事业部：</label>&nbsp;
            <input type="text" name="BU" data-rule="required"  value="${BU}"/>--}%

            <label >时间段：</label>&nbsp;
            <input type="text" name="startTime" value="${startTime}" data-pattern="yyyy-MM-dd"  data-toggle="datepicker" placeholder="FROM">
            <input type="text" name="endTime" value="${endTime}" data-pattern="yyyy-MM-dd" data-toggle="datepicker" placeholder="TO">&nbsp;&nbsp;
            <button type="submit" class="btn-default" data-icon="search">查询</button>&nbsp;
            <button type="button" class="btn-blue" onclick="javascript:bjuiExportExl('#pagerForm','${request.getContextPath()}/PartProgress/exportExcel')" data-icon="file-excel-o" title="导出Excel">导出</button>&nbsp;
        </div>
    </form>
</div>

<div class="bjui-pageContent">
    <g:if test="${dataStatistics.size() > 0}">
        <div id="dataStatistics" style="width:100%;height:62%;" ></div>
        <script  src="${request.getContextPath()}/js/echarts/echarts.js"></script>
        <script  src="${request.getContextPath()}/js/echarts/echarts-tool.js"></script>
        <script type="text/javascript">

            // 基于准备好的dom，初始化echarts实例
            var contextPath = "${request.getContextPath()}";
            eChartsTool.init(contextPath);

            // 指定图表的配置项和数据
            var option = {
                color: ['#003366', '#006699', '#4cabce', '#e5323e','#32cd32','#FFC0CB'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['QZ', 'SI', 'VF', 'FC','PV','WG','TE']
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {show: false},
                        data: ['订单确认工艺路线数量', '进站数量', '出站数量', '入库数量']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: 'QZ',
                        type: 'bar',
                        barGap: 0,
                        data: ${listQz}
                    },
                    {
                        name: 'SI',
                        type: 'bar',
                        data: ${listSi}
                    },
                    {
                        name: 'VF',
                        type: 'bar',
                        data: ${listVf}
                    },
                    {
                        name: 'FC',
                        type: 'bar',
                        data: ${listFc}
                    }
                    ,
                    {
                        name: 'PV',
                        type: 'bar',
                        data: ${listPv}
                    }
                    ,
                    {
                        name: 'WG',
                        type: 'bar',
                        data: ${listWg}
                    }
                    ,
                    {
                        name: 'TE',
                        type: 'bar',
                        data: ${listTe}
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            eChartsTool.setOption("roma", document.getElementById('dataStatistics'), option);
        </script>
        <br>
        <br>
        <br>
        <div style="margin:15px auto; width:96%;">
        <div class="row" style="padding: 0px 0px;">
            <div class="col-md-12" >
        <table  data-toggle="tablefixed" data-width="100%" data-nowrap="true">
            <thead>
            <tr id="t1">
                <g:each in="${tableHeadList}" status="j" var="headInstance">
                    <g:if test="${headInstance!='RN'}">
                        <th  width="125"><g:message code="${headInstance}" default="${headInstance}"/></th>
                    </g:if>
                </g:each>
            </tr>
            </thead>
            <tbody>
            <g:if test="${dataStatistics.size()>0}">
                <g:each in="${dataStatistics}" status="i" var="dataInstance">
                    <tr>
                        <g:each in="${tableHeadList}" status="j" var="headInstance">
                            <g:if test="${headInstance!='RN'}">
                                <td>${dataInstance["${headInstance}"]}</td>
                            </g:if>
                        </g:each>
                    </tr>
                </g:each>

            </g:if>
            <g:else>
                <g:render template="../template/emptyPanel" />
            </g:else>
            </tbody>
        </table>
            </div>
        </div>
        </div>
    </g:if>
</div>

